<script setup>
import { onMounted, ref } from 'vue'
import commonModel from '@/http/modules/common.js'
import Utility from '@/utils/utility'
const prize_rule_bg = `${Utility.getOssStaticDomain()}/cross/prize/prize_rule_bg.png`
const paramsCode = Utility.getSearchParams().code
const ruleContent = ref('')
const loadedRuleBg = ref(false)
function getPrizeRule() {
  commonModel
    .gatewayApi({
      service: 'cb_trade_draw_info',
      bizContent: {
        code: paramsCode,
      },
      version: '1.0.0',
    })
    .then((result) => {
      if (result) {
        ruleContent.value = result.content
      }
    })
}
function loadRuleBg(){
  Utility.imgPreLoad(prize_rule_bg,'prize_rule_bg').then(()=>loadedRuleBg.value=true)
}
onMounted(() => {
  getPrizeRule()
  loadRuleBg()
})
</script>
<template>
  <div class="prize-rule-wrapper" :style="{backgroundImage:loadedRuleBg && `url(${prize_rule_bg})`}">
    <div class="prize-rule-box">
      <p class="prize-rule-box-title">
        <i class="line"></i>
        <span class="text">活动规则</span>
        <i class="line"></i>
      </p>
      <pre class="prize-rule-box-content">
        {{ ruleContent }}
      </pre>
    </div>
  </div>
</template>
<style scoped lang="scss">
.prize-rule {
  &-wrapper {
    width: 100%;
    background-size: 100%;
    padding: 0.21rem 0.24rem;
    min-height: calc(100vh - 0.46rem);
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    background-image: linear-gradient(to right bottom, #eadfe8, #fcbbab);
  }
  &-box {
    padding: 0.2rem 0.26rem .34rem;
    height: fit-content;
    box-sizing: border-box;
    width: 3.28rem;
    background: #f78082;
    border-radius: 0.1rem;
    &-title {
      display: flex;
      text-align: center;
      justify-content: center;
      align-items: center;
      font-size: 0.2rem;
      color: #fff;
      .line {
        width: 0.5rem;
        height: 1px;
        background-color: #fff;
      }
      .text {
        margin: 0 0.09rem;
      }
    }
    &-content {
      margin-top: 0.13rem;
      color: #fff;
      font-size: 0.14rem;
      white-space: pre-line;
    }
  }
}
</style>
